<template>
  <div class="layout-container">
    <!-- Header Navigation -->
    <el-header class="layout-header">
      <div class="header-left">
        <div class="logo">
          <i class="el-icon-s-home"></i>
          <span class="logo-text">智慧物业</span>
        </div>
      </div>
      <div class="header-right">
        <div class="user-info">
          <el-avatar :size="32" style="margin-right: 10px;">
            <i class="el-icon-user-solid"></i>
          </el-avatar>
          <span class="username">shangtu</span>
          <el-badge :value="2" class="notification-badge">
            <i class="el-icon-bell"></i>
          </el-badge>
          <i class="el-icon-setting" style="margin-left: 15px; cursor: pointer;"></i>
        </div>
      </div>
    </el-header>

    <el-container class="layout-body">
      <!-- Sidebar Navigation -->
      <el-aside class="layout-sidebar" width="200px">
        <el-menu
          :default-active="$route.path"
          class="sidebar-menu"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/dashboard">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <!-- <el-menu-item index="/data-center">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据中心</span>
          </el-menu-item> -->

          <el-submenu index="/data-center" class="customer-submenu">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span slot="title">数据中心</span>
            </template>
            <el-menu-item index="/data-center">小区管理</el-menu-item>
            <el-menu-item index="/data-center/building-management">楼宇管理</el-menu-item>
            <el-menu-item index="/data-center/parking-management">车位管理</el-menu-item>
            <el-menu-item index="/data-center/homeowner-management">业主管理</el-menu-item>
            <el-menu-item index="/data-center/tenant-management">租客管理</el-menu-item>
            <el-menu-item index="/data-center/visitor-management">访客管理</el-menu-item>
            <el-menu-item index="/data-center/advertising-management">广告位管理</el-menu-item>
            <el-menu-item index="/data-center/car-management">车辆管理</el-menu-item>
          </el-submenu>


          <el-submenu index="/revenue-management" class="customer-submenu">
            <template slot="title">
                <i class="el-icon-s-finance"></i>
                <span slot="title">收费管理</span>
            </template>
            <el-menu-item index="/revenue-management">收银台</el-menu-item>
            <el-menu-item index="/revenue-management/unpaid-bill">未缴账单</el-menu-item>
            <el-menu-item index="/revenue-management/payment-notice">缴费通知</el-menu-item>
            <el-menu-item index="/revenue-management/paid-bill">已缴账单</el-menu-item>
            <el-menu-item index="/revenue-management/prepaid-management">预存款管理</el-menu-item>
            <el-menu-item index="/revenue-management/charge-setting">收费设置</el-menu-item>
          </el-submenu>
          

          <el-submenu index="/property-service" class="customer-submenu">
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span slot="title">物业服务</span>
            </template>
            <el-menu-item index="/property-service">公告管理</el-menu-item>
            <el-menu-item index="/property-service/repair-mgmt">报事报修</el-menu-item>
            <el-menu-item index="/property-service/complaint-mgmt">投诉管理</el-menu-item>
            <el-menu-item index="/property-service/decoration">装修管理</el-menu-item>
            <el-menu-item index="/property-service/survey">问卷调查</el-menu-item>
          </el-submenu>


          <el-submenu index="/customer-management" class="customer-submenu">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>租赁管理</span>
            </template>
            <el-menu-item index="/customer-management">客户管理</el-menu-item>
            <el-menu-item index="/customer-management/vehicle-space">车位租赁</el-menu-item>
            <el-menu-item index="/customer-management/advertising-space">广告位租赁</el-menu-item>
            <el-menu-item index="/customer-management/housing-lease">房屋租赁</el-menu-item>
            <el-menu-item index="/customer-management/contract-management">合同管理</el-menu-item>
          </el-submenu>


          <el-submenu index="/property-management" class="customer-submenu">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span slot="title">物料管理</span>
            </template>
            <el-menu-item index="/property-management/suppliers">供应商管理</el-menu-item>
            <el-menu-item index="/property-management/warehouse-management">仓库管理</el-menu-item>
            <el-menu-item index="/property-management/material-list">物料清单</el-menu-item>
            <el-menu-item index="/property-management/in-waregouse">采购入库</el-menu-item>
            <el-menu-item index="/property-management/out-warehouse">领用出库</el-menu-item>
             <el-menu-item index="/property-management/inventory-query">库存查询</el-menu-item>
          </el-submenu>

         


          <el-submenu index="/equipment-management" class="customer-submenu">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span slot="title">设备管理</span>
            </template>
            <el-menu-item index="/equipment-management">设备档案</el-menu-item>
            <el-menu-item index="/equipment-management/maintenance-plan">保养计划</el-menu-item>
            <el-menu-item index="/equipment-management/maintenance-record">保养记录</el-menu-item>
            <el-menu-item index="/equipment-management/equipment-maintenance">设备运维</el-menu-item>
          </el-submenu>

          <el-menu-item index="/income-expense">
            <i class="el-icon-s-marketing"></i>
            <span slot="title">收益管理</span>
          </el-menu-item>

          <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">统计分析</span>
          </el-menu-item>

          <el-menu-item index="/system-management">
            <i class="el-icon-s-tools"></i>
            <span slot="title">系统管理</span>
          </el-menu-item> 
        </el-menu>
      </el-aside>

      <!-- Main Content Area -->
      <el-main class="layout-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {}
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-header {
  background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left .logo {
  display: flex;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.logo i {
  font-size: 24px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
}

.header-right .user-info {
  display: flex;
  align-items: center;
  color: white;
}

.username {
  margin-right: 15px;
  font-size: 14px;
}

.notification-badge {
  margin-right: 10px;
  cursor: pointer;
}

.layout-body {
  flex: 1;
  overflow: hidden;
}

.layout-sidebar {
  background-color: #545c64;
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}

.customer-submenu.is-active {
  background-color: #434a50 !important;
}

.layout-main {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
}
</style>